import type { ColProps } from 'ant-design-vue';
import type { NamePath } from 'ant-design-vue/lib/form/interface';
import type { HTMLAttributes, VNodeChild } from 'vue';

export interface FormItem {
	/**
	 * Used with label, whether to display : after label text.
	 * @default true
	 * @type boolean
	 */
	colon?: boolean;

	/**
	 * The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time.
	 * @type any (string | slot)
	 */
	extra?: string | VNodeChild | JSX.Element;

	/**
	 * Used with validateStatus, this option specifies the validation status icon. Recommended to be used only with Input.
	 * @default false
	 * @type boolean
	 */
	hasFeedback?: boolean;

	/**
	 * The prompt message. If not provided, the prompt message will be generated by the validation rule.
	 * @type any (string | slot)
	 */
	help?: string | VNodeChild | JSX.Element;

	/**
	 * Label test
	 * @type any (string | slot)
	 */
	label?: string | VNodeChild | JSX.Element;

	/**
	 * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>
	 * @type Col
	 */
	labelCol?: ColProps & HTMLAttributes;

	/**
	 * Whether provided or not, it will be generated by the validation rule.
	 * @default false
	 * @type boolean
	 */
	required?: boolean;

	/**
	 * The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating'
	 * @type string
	 */
	validateStatus?: '' | 'success' | 'warning' | 'error' | 'validating';

	/**
	 * The layout for input controls, same as labelCol
	 * @type Col
	 */
	wrapperCol?: ColProps;
	/**
	 * Set sub label htmlFor.
	 */
	htmlFor?: string;
	/**
	 * text align of label
	 */
	labelAlign?: 'left' | 'right';
	/**
	 * a key of model. In the setting of validate and resetFields method, the attribute is required
	 */
	name?: NamePath;
	/**
	 * validation rules of form
	 */
	rules?: object | object[];
	/**
	 * Whether to automatically associate form fields. In most cases, you can setting automatic association.
	 * If the conditions for automatic association are not met, you can manually associate them. See the notes below.
	 */
	autoLink?: boolean;
	/**
	 * Whether stop validate on first rule of error for this field.
	 */
	validateFirst?: boolean;
	/**
	 * When to validate the value of children node
	 */
	validateTrigger?: string | string[] | false;
}

export type ComponentType =
	| 'Input'
	| 'InputGroup'
	| 'InputPassword'
	| 'InputSearch'
	| 'InputTextArea'
	| 'InputNumber'
	| 'InputCountDown'
	| 'Select'
	| 'ApiSelect'
	| 'TreeSelect'
	| 'ApiTree'
	| 'ApiTreeSelect'
	| 'ApiRadioGroup'
	| 'ApiCascader'
	| 'RadioButtonGroup'
	| 'RadioGroup'
	| 'Checkbox'
	| 'CheckboxGroup'
	| 'AutoComplete'
	| 'Cascader'
	| 'DatePicker'
	| 'MonthPicker'
	| 'RangePicker'
	| 'WeekPicker'
	| 'TimePicker'
	| 'Switch'
	| 'StrengthMeter'
	| 'Upload'
	| 'IconPicker'
	| 'Render'
	| 'Slider'
	| 'Rate'
	| 'Divider'
	| 'PictureCardUpload'
	| 'SimpleUpload'
	| 'DeptPersonTreeSelect';

type ColSpanType = number | string;
export interface ColEx {
	style?: any;
	/**
	 * raster number of cells to occupy, 0 corresponds to display: none
	 * @default none (0)
	 * @type ColSpanType
	 */
	span?: ColSpanType;

	/**
	 * raster order, used in flex layout mode
	 * @default 0
	 * @type ColSpanType
	 */
	order?: ColSpanType;

	/**
	 * the layout fill of flex
	 * @default none
	 * @type ColSpanType
	 */
	flex?: ColSpanType;

	/**
	 * the number of cells to offset Col from the left
	 * @default 0
	 * @type ColSpanType
	 */
	offset?: ColSpanType;

	/**
	 * the number of cells that raster is moved to the right
	 * @default 0
	 * @type ColSpanType
	 */
	push?: ColSpanType;

	/**
	 * the number of cells that raster is moved to the left
	 * @default 0
	 * @type ColSpanType
	 */
	pull?: ColSpanType;

	/**
	 * <576px and also default setting, could be a span value or an object containing above props
	 * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
	 */
	xs?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

	/**
	 * ≥576px, could be a span value or an object containing above props
	 * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
	 */
	sm?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

	/**
	 * ≥768px, could be a span value or an object containing above props
	 * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
	 */
	md?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

	/**
	 * ≥992px, could be a span value or an object containing above props
	 * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
	 */
	lg?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

	/**
	 * ≥1200px, could be a span value or an object containing above props
	 * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
	 */
	xl?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;

	/**
	 * ≥1600px, could be a span value or an object containing above props
	 * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
	 */
	xxl?: { span: ColSpanType; offset: ColSpanType } | ColSpanType;
}
